<template>
	<!-- 第三方登录 -->
	<view class="third-login grace-flex-center">
		<block v-for="(provider,index) in providerList" :key="index">
			<view class="grace-flex-center grace-flex-vcenter grace-flex1" @click="login(provider)"><text :class="'icon-'+provider.icon" class="iconfont grace-flex-center grace-flex-vcenter"></text></view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 providerList: []
			};
		},
		created() {
			uni.getProvider({
				service: 'oauth',
				success: (result) => {
					this.providerList = result.provider.map((value) => {
							let providerName = '';
							let icon = '';
							switch (value) {
									case 'weixin':
											providerName = '微信登录'
											icon = 'weixin'
											break;
									case 'qq':
											providerName = 'QQ登录'
											icon = 'QQ'
											break;
									case 'sinaweibo':
											providerName = '新浪微博登录'
											icon = 'xinlangweibo'
											break;
									case 'xiaomi':
											providerName = '小米登录'
											break;
									case 'alipay':
											providerName = '支付宝登录'
											break;
									case 'baidu':
											providerName = '百度登录'
											break;
									case 'toutiao':
											providerName = '头条登录'
											break;
									case 'apple':
											providerName = '苹果登录'
											break;
							}
							return {
									name: providerName,
									icon:icon,
									id: value 
							}
					});
				},
				fail: (error) => {
				    console.log('获取登录通道失败', error);
				}
			});
		},
		methods:{
			login(provider) {
				uni.login({
					provider: provider.id,
					// #ifdef MP-ALIPAY
					scopes: 'auth_user', //支付宝小程序需设置授权类型
					// #endif
					success: (res) => {
							console.log('login success:', res);
							//保存本地 修改登录状态
							console.log("登录成功")
							uni.getUserInfo({
								provider:provider.id,
								success:(infoRes)=>{
									infoRes.userInfo
								}
							})
					},
					fail: (err) => {
							console.log('login fail:', err);
					}
				});
			}
		}
	}
</script>

<style lang="stylus">
.third-login
	padding 20rpx 60rpx
	view
		.icon-weixin
			background #2BD198
		.icon-QQ
			background #2CAEFC
		.icon-xinlangweibo
			background #FC7729
		text
			width 120rpx
			height 120rpx
			border-radius 100%
			color #FFFFFF
			font-size 50rpx
</style>
